<script setup>
import { reactive, ref } from 'vue'
import { useHouseAllList } from '../../../hooks/house/index.js';
import { editnoticeApi, addnoticeApi, getnoticeInfoApi } from '../../../api/content/notice.js'
import { useTypeState, useNoticeState } from '../../../hooks/content/notice.js'
// import { getparkingApi } from '../../../api/parking.js'
import uploadImg from '@/components/Table/uploadImg.vue'
import Editor from '@/components/Table/Editor.vue'
import { ElMessage } from 'element-plus'
const houseList = useHouseAllList()
const emit = defineEmits(['updateList'])
const typeList = useTypeState()
const stateList = useNoticeState()
const prop = defineProps({
  list: {
    type: Array
  }
})

// let isShow = ref(false)
// 表单数据
const defaultState = reactive({
  community_code: '',
  title: '',
  sort: '',
  status: '',
  type: '',
  pic_url: '',
  content: '',
  id: null
})
const formData = reactive({ ...defaultState })
// 表达校验
const formRules = {
  community_code: [{ required: true, message: "请输入", trigger: "blur" }],
  title: [{ required: true, message: "请输入", trigger: "blur" }],
  content: [{ required: true, message: "请输入内容", trigger: "change" }],
  status: [{ required: true, message: "请选择状态", trigger: "blur" }],
  type: [{ required: true, message: "请选择类型", trigger: "blur" }],
  sort: [{ required: true, message: "请输入排序大小", trigger: "blur" }],
}
// 表单ref引用
const formRef = ref()
// 弹窗控制变量
let isShow = ref(false);
// 关闭事件
const closeHandler = () => {
  // 移除校验
  formRef.value.resetFields()
  // 重置表单数据
  Object.assign(formData, { ...defaultState })
};
// 表单提交
const onSubmit = async () => {
  try {
    // 表单校验
    await formRef.value.validate()
    // 整理数据
    // 提交数据
    const data = toRaw(formData)
    formData.id ? await editnoticeApi(data) : await addnoticeApi(data)
    // 提示成功
    ElMessage.success()
    // 关闭
    isShow.value = false
    // 列表更新
    emit('updateList')
  } catch (error) {
    console.log(error);
  }
}
// 富文本框
const changeInput = (val) => {
  formData.content = val
}
// //小区改变获取车位
// const parkingList = ref([])
// const changeList = async (val) => {
//   console.log(val);
//   let { data } = await getparkingApi({ community_code: val })
//   parkingList.value = data
//   // console.log(data);

// }
//  回显数据
const replyData = async (id) => {
  let res = await getnoticeInfoApi(id)
  // console.log(res);
  Object.assign(formData, res.data)
  isShow.value = true
}
// 标题
const title = computed(() => {
  return formData.id ? '修改通知公告' : '新增新增公告'
})
// =================================================================
defineExpose({
  isShow, replyData
})
</script>
<template>
  <el-button class="button" type="primary" style="margin-left: 16px" @click="isShow = true">
    新增通知公告
  </el-button>
  <el-form :model="formData" ref="formRef" :rules="formRules" label-width="80px" :inline="false">
    <el-drawer v-model="isShow" :title="title" :with-header="true" size="50%" @close="closeHandler">
      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="所属小区" prop="community_code">
            <el-select v-model="formData.community_code" placeholder="请选择" class="select" @change="changeList">
              <el-option v-for="item in houseList" :label="item.name" :value="item.code" :key="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="启用状态" prop="status">
            <el-radio-group v-model="formData.status" class="ml-4">
              <el-radio label="1" size="small">启用</el-radio>
              <el-radio label="0" size="small">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="标题" prop="title">
            <el-input v-model="formData.title" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序大小" prop="sort">
            <el-input-number v-model="formData.sort" class="mx-4" :min="-9999" :max="9999" controls-position="right"
              @change="handleChange" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="类型" prop="type">
            <el-select v-model="formData.type" placeholder="请选择" class="select" @change="changeList">
              <el-option v-for="item in typeList" :label="item.label" :value="item.value" :key="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="图片上传">
            <uploadImg v-model:imgUrl="formData.pic_url"></uploadImg>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="公告内容" prop="content">
        <Editor :value="formData.content" :min-height="192" @update:input="changeInput"></Editor>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-drawer>
  </el-form>
</template>
<style lang="scss" scoped>
.button {
  float: right;
  margin-right: 100px;
  margin-bottom: 20px;
}

.select {
  width: 100%;
}
</style>